<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../assets/js/vue.js"></script>
    <title>Vue propsData</title>
</head>
<body>
    <h1></h1>
    <hr>
    <div id="app">
        <h2>vue propsData Vue的扩展</h2>
            <header></header>         
        <hr>
    </div>
</body>
<script>    
    var header_a = Vue.extend({
        template:`<p>This is my props vueExtend {{Data}} {{message}}</p>`,
        data:function(){
            return {
                message:"孙克宁"
            }
        },
        props:["Data"] //接受实例话对象时传入的propsData 数据
    });
    
    // 我们用propsData三步解决传值：

    // 1、在全局扩展里加入props进行接收。propsData:{a:1}

    // 2、传递时用propsData进行传递。props:[‘a’]

    // 3、用插值的形式写入模板。{{ a }}
    new header_a({propsData:{Data:"propsdata传的数据"}}).$mount("header");

//     var  header_a = Vue.extend({
//     template:`<p>{{message}}-{{data}}</p>`,
//     data:function(){
//         return {
//             message:'Hello,I am Header'
//         }
//     },
//     props:['data']
// }); 
// new header_a({propsData:{data:22}}).$mount('header');
    
</script>
</html>